<template>
  <div style="background-color: #fff">
    <van-tabs>
      <van-tab title="账号登录">
        <van-form>
          <van-field
            v-model="form.strUsernum"
            placeholder="请输入手机号"
            :rules="[{ required: true, message: '请填写手机号' }]"
          />
          <van-field
            v-model="form.strPassword"
            type="password"
            placeholder="请输入验证码"
            :rules="[{ required: true, message: '请填写验证码' }]"
          />
        </van-form>
      </van-tab>
      <van-tab title="手机号登录">
        <van-form>
          <van-field
            v-model="form.strUsernum"
            placeholder="请输入账号"
            :rules="[{ required: true, message: '请填写账号' }]"
          />
          <van-field
            v-model="form.strPassword"
            type="password"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-form>
      </van-tab>
      <van-button type="primary" block @click="login">登录</van-button>
    </van-tabs>
  </div>
</template>

<script>
import { login } from '@/api/login/index'
import md5 from 'js-md5'

export default {
  name: 'Login',
  data() {
    return {
      hostName: 'http://ruiyinwx.free.idcfengye.com',
      wxAppId: 'wxab8557c5d0a4bb46',
      openId: '',
      value: '',
      form: {
        strUsernum: '',
        strPassword: '',
        openid: this.openId
      }
    }
  },
  created() {
    let str = window.location.href
    console.log('str', str)
    let openid = localStorage.getItem('openid')
    console.log(openid)
    if (openid != null) {
      //存在openid,已经授权
      console.log(openid)
      this.$router.push('/Menus')
    } else {
      var ua = navigator.userAgent.toLowerCase()
      var isWeixin = ua.indexOf('micromessenger') !== -1 // 是否 在微信浏览器内
      let isURL = window.location.href.indexOf('code=') === -1 // 是否 没有授权重定向回来
      if (isWeixin && isURL) {
        this.getLogin()
      } else {
        this.form.openid = this.$route.query.userinfo
        localStorage.setItem('openid', this.form.openid)
        let openid = localStorage.getItem('openid')
        console.log(openid)
      }
    }
  },

  //  关键方法：
  methods: {
    login() {
      let param = this.form
      param.strPassword = md5(param.strPassword)
      login(param).then(res => {
        this.form.userOrg = res.userinfo.iOrgsysnum
        this.form.iUsersysnum = res.userinfo.iUsersysnum
        localStorage.setItem('iOrgsysnum', this.form.userOrg)
        localStorage.setItem('iUsersysnum', this.form.iUsersysnum)
        this.$router.push('/Menus')
      })
    },
    getLogin() {
      // let urlrouter = window.location.href.split('#/')[1] // 当前路由
      //hostName是后台服务器域名
      //url 是当前页面的地址。
      //appId 是公众号appid（注意：确定后台提供的appid和相关的token是同一个公众号的）

      let url = this.hostName + '/wxAuth/callBack/' // 重定向返回地址
      //let redirecturl = this.encodeURIComponent(url)
      let redirectUrl = encodeURIComponent(url) //encode编码
      let str =
        'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
        this.wxAppId +
        '&redirect_uri=' +
        redirectUrl +
        '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect#wechat_redirect'
      console.log('微信授权连接：', str)
      window.location.href = str
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .van-nav-bar {
  height: 45px;
}

/deep/ #app {
  margin-top: 0;
}

/deep/ .van-nav-bar .van-icon {
  color: #333;
}

/deep/ .van-nav-bar__text {
  color: #333;
}

/deep/ .van-tabs__content {
  margin: 0.5rem 0.8rem 0 0.8rem;
  margin-top: 0.5rem;
}

/deep/ .van-tabs__line {
  height: 2px;
  background-color: #0c1b35;
  width: 50px !important;
}

/deep/ .van-tab__text--ellipsis {
  margin-top: 13px;
}

/deep/ .van-cell {
  line-height: 40px;
}

/deep/ .van-cell-group {
  margin-top: 25px;
}

/deep/ .van-button--primary {
  color: #fff;
  background-color: #0c1b35;
  border: 0.02667rem solid #0c1b35;
  margin-top: 40px;
  border-radius: 4px;
  height: 40px;
}

/deep/ [class*='van-hairline']::after {
  border-top: 0;
}
</style>
